<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模块架构图预览</title>
    <script src="https://cdn.jsdelivr.net/npm/mermaid@10.0.2/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }
        .chart-container {
            margin-bottom: 40px;
            padding: 20px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            background-color: #fafafa;
        }
        h2 {
            color: #555;
            border-bottom: 2px solid #4A90E2;
            padding-bottom: 10px;
        }
        .mermaid {
            text-align: center;
            margin-top: 20px;
            background-color: white;
            padding: 20px;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>模块架构图预览</h1>
        
        <div class="chart-container">
            <h2>前端模块架构</h2>
            <div class="mermaid">
graph TB
    A[前端应用&lt;br/&gt;React/Next.js] --> B[用户认证模块]
    A --> C[首页展示模块]
    A --> D[产品展示模块]
    A --> E[产品详情模块]
    A --> F[购物车模块]
    A --> G[订单结算模块]
    A --> H[订单管理模块]
    A --> I[产品溯源模块]
    A --> J[用户中心模块]
    A --> K[管理员后台模块]
    
    subgraph 前端主应用
        A
    end
    
    subgraph 用户相关模块
        B
        J
    end
    
    subgraph 产品相关模块
        C
        D
        E
        I
    end
    
    subgraph 交易相关模块
        F
        G
        H
    end
    
    subgraph 管理模块
        K
    end
            </div>
        </div>
        
        <div class="chart-container">
            <h2>后端模块架构</h2>
            <div class="mermaid">
graph TB
    A[后端服务&lt;br/&gt;Spring Boot] --> B[用户认证模块]
    A --> C[用户管理模块]
    A --> D[产品管理模块]
    A --> E[购物车管理模块]
    A --> F[订单管理模块]
    A --> G[产品溯源模块]
    A --> H[文件上传模块]
    A --> I[支付模拟模块]
    A --> J[短信服务模块]
    A --> K[地图服务模块]
    
    B --> L[JWT认证]
    B --> M[密码加密]
    
    C --> N[用户信息管理]
    C --> O[用户权限管理]
    
    D --> P[产品信息管理]
    D --> Q[产品分类管理]
    D --> R[库存管理]
    
    E --> S[购物车增删改查]
    
    F --> T[订单创建]
    F --> U[订单查询]
    F --> V[订单状态管理]
    
    G --> W[溯源信息查询]
    G --> X[批次管理]
    
    H --> Y[文件存储]
    H --> Z[图片处理]
    
    subgraph 后端主服务
        A
    end
    
    subgraph 认证与安全
        B
        L
        M
    end
    
    subgraph 用户管理
        C
        N
        O
    end
    
    subgraph 产品管理
        D
        P
        Q
        R
    end
    
    subgraph 交易管理
        E
        F
        S
        T
        U
        V
    end
    
    subgraph 溯源管理
        G
        W
        X
    end
    
    subgraph 文件与支付
        H
        I
        Y
        Z
    end
    
    subgraph 第三方服务
        J
        K
    end
            </div>
        </div>
        
        <div class="chart-container">
            <h2>数据库模块关系</h2>
            <div class="mermaid">
graph TB
    A[用户表&lt;br/&gt;users] --> B[购物车表&lt;br/&gt;shopping_cart]
    A --> C[订单表&lt;br/&gt;orders]
    D[产品表&lt;br/&gt;products] --> B
    D --> C
    D --> E[订单详情表&lt;br/&gt;order_items]
    D --> F[溯源信息表&lt;br/&gt;traceability_info]
    C --> E
    A --> G[用户地址表&lt;br/&gt;user_addresses]
    
    subgraph 用户相关
        A
        G
    end
    
    subgraph 产品相关
        D
        F
    end
    
    subgraph 交易相关
        B
        C
        E
    end
            </div>
        </div>
        
        <div class="chart-container">
            <h2>API接口模块</h2>
            <div class="mermaid">
graph TB
    A[RESTful API] --> B[认证接口&lt;br/&gt;/auth/**]
    A --> C[用户接口&lt;br/&gt;/users/**]
    A --> D[产品接口&lt;br/&gt;/products/**]
    A --> E[购物车接口&lt;br/&gt;/cart/**]
    A --> F[订单接口&lt;br/&gt;/orders/**]
    A --> G[溯源接口&lt;br/&gt;/trace/**]
    A --> H[文件接口&lt;br/&gt;/upload/**]
    A --> I[支付接口&lt;br/&gt;/payment/**]
    
    subgraph API网关
        A
    end
    
    subgraph 功能接口
        B
        C
        D
        E
        F
        G
        H
        I
    end
            </div>
        </div>
    </div>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true
            }
        });
    </script>
</body>
</html>